<template>
  <div class="switch-building">
    <div class="switch-btn" @click="showModal = !showModal">
      <cu-icon class="icon" type="org-qiehuanlouyu2" />
    </div>
    <div class="building-box box2" v-if="showModal">
      <a-row class="box2-header" type="flex" align="middle">
        <a-col flex="auto" class="box-title"> 切换楼宇 </a-col>
        <a-col flex="80px" class="close" @click="showModal = false">
          <CloseOutlined />
        </a-col>
      </a-row>
      <section class="box-content custom-scrollbar">
        <div class="card" v-for="village of villageList" :key="village.arrKey">
          <div
            class="project"
            @click="handleBuildShow(village)"
            :class="{ dashed: currentShowVillageId == village.id }"
          >
            <span class="name">{{ village.name }}</span>
            <UpOutlined v-if="currentShowVillageId == village.id" />
            <DownOutlined v-else />
          </div>
          <div class="building" v-if="currentShowVillageId == village.id">
            <div
              class="item"
              :class="{ active: build.id == currentShowBuildId }"
              v-for="build of village.buildList"
              :key="build.id"
              @click="handleBuildingClick(build)"
            >
              <cu-icon class="icon" type="org-louyujiqun" />
              <span>{{ build.build_name }}</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "@vue/runtime-core";
import { CloseOutlined, UpOutlined, DownOutlined } from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import { useRoute, useRouter } from "vue-router";
import store from "../../../store";

export default defineComponent({
  name: "SwitchBuilding3D",
  components: { CloseOutlined, UpOutlined, DownOutlined },
  setup() {
    const $route = useRoute();
    const $router = useRouter();
    const state = reactive({
      showModal: false,
      villageList: [],
      currentShowVillageId: $route.query.villageId || 0,
      currentShowBuildId: $route.query.buildId || 0,
    });

    const handleBuildShow = (village) => {
      state.currentShowVillageId =
        state.currentShowVillageId == village.id ? 0 : village.id;
    };

    const handleBuildingClick = (current) => {
      state.currentShowBuildId = current.id;
      const query = { ...$route.query };
      query.buildId = current.id;
      query.villageId = current.village_id;
      delete query.layerId;
      $router.replace({
        path: $route.path,
        query,
      });
    };

    watch(
      () => $route.query.buildId,
      (val, preval) => {
        if (preval && val != preval) {
          location.reload();
        }
      }
    );

    const getVillageAndBuild = () => {
      request
        .get("/org", "/build/villageAndBuildList", { checked: 1 })
        .then((res) => {
          state.villageList = res.villageList;
          // 存入初始化信息
          const village = state.villageList.find(
            (item) => item.id == state.currentShowVillageId
          );
          const build = village.buildList.find(
            (item) => item.id == state.currentShowBuildId
          );
          store.dispatch("SetCurrentInfo", { village, build });
        });
    };
    getVillageAndBuild();

    return {
      ...toRefs(state),
      handleBuildShow,
      handleBuildingClick,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../index.less";
.switch-building {
  .switch-btn {
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    // color: @mainColor;
    cursor: pointer;
    color: #fff;
    &:hover {
      color: @mainColor;
    }
  }
  .building-box {
    position: fixed;
    z-index: 200;
    right: 30px;
    bottom: 120px;
    padding: 10px;
    width: 600px;
    // background: rgba(0, 0, 0, 0.7);

    .box-title {
      color: #fff;
      font-size: 18px;
    }
    .box-content {
      max-height: 400px;
      overflow: hidden auto;
      margin: 10px 0;
      color: #fff;
      .card {
        background: rgba(6, 183, 243, 0.2);
        border-radius: 10px;
        margin: 10px 10px;
        overflow: hidden;
        border: 1px dashed rgba(6, 183, 243, 0.3);
        cursor: pointer;
        .dashed {
          border-bottom: 1px dashed rgba(6, 183, 243, 0.2);
        }
        .project {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          font-size: 16px;
          padding: 10px;
        }
        .building {
          padding: 10px;
          .item {
            height: 40px;
            display: flex;
            align-items: center;
            padding: 10px;
            font-size: 14px;
            .icon {
              font-size: 20px;
              margin-right: 10px;
              // color: @mainColor;
            }
          }
          .active {
            background-image: linear-gradient(
              to right,
              rgba(6, 183, 243, 0.2) 0%,
              rgba(6, 183, 243, 0.3) 20%,
              rgba(6, 183, 243, 0.4) 80%,
              rgba(6, 183, 243, 0.6) 100%
            );
            border-radius: 4px;
            border: 1px solid rgba(6, 183, 243, 0.8);
          }
        }
      }
    }
  }
}
</style>
